<template>
 <SubLayout @refresh="refresh" :breadcrumb="false" :showRefresh="true">
    <!-- 操作栏 -->
     <template #bread>
      <router-link to><span @click="router.go(-1)">应用列表</span></router-link>
      <el-icon class="route-icon"> <arrow-right /> </el-icon>
    </template>
    <template #left>
      <ApplicationSelect v-model="query.evtAppId" @refresh="queryChange" />
      <AuthStatusSelect v-model="query.permsSts" @refresh="queryChange" />
      <el-input
        class="input"
        placeholder="搜索事件名称"
        v-model="query.evtName"
        @input="queryChange"
      />
      <el-button type="primary" @click="reset">重置</el-button>
    </template>
    <template #default>
      <!-- 表格 -->
      <DynamicTable
        ref="DynamicTable"
        v-loading="listLoading"
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
      <!-- 订阅模式 -->
      <ModeDrawer
        v-model="showEdit"
        :type="editType"
        :item="currentItem"
        @update-list="refresh"
      />
    </template>
    
  </SubLayout>
  
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive } from "vue";
import { useListManage } from '@/hooks';
import { Search, ArrowRight } from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from "element-plus";

import {
    getAppModePageList, // 事件分页列表
    getModeDetail, // 订阅模式详情
    deleteAppMode // 删除订阅
} from '@/api/application'

// 组建调用
import DynamicTable from "@/components/DynamicTable";
import SubLayout from '@/components/SubLayout';
import ModeDrawer from './components/ModeDrawer.vue';

import ApplicationSelect from '@/components/ApplicationSelect';
import AuthStatusSelect from '@/components/AuthStatusSelect';
export default defineComponent({
  name: "ApplicationSubscribe",
  components: {

    DynamicTable,
    ModeDrawer,
    ApplicationSelect,
    AuthStatusSelect,
    SubLayout,
    ArrowRight
  },
  setup(props, { emit, slots }) {
    const route = useRoute()
    const router = useRouter()
    const query = reactive({
      evtAppId: '', // 事件所属应用id
      appName:route.query.name,
      evtName: '',
      appId: route.params.id, // 当前应用id
      permsSts: ''

    });
    const DynamicTable = ref(null);
    let {
      page,
      list,
      total,
      editType,
      showEdit,
      refresh,
      listLoading,
      handleDelete,
      handleUpdate,
      getList,
      queryChange,
      currentItem,
      reset
    } = useListManage(props, emit, {
      getItems: getAppModePageList,
      query: query,
      deleteItem: deleteAppMode,
      getDetail: getModeDetail
    });
    const handleCreate = async(row, index) => {
      editType.value = "create";
      currentItem.value = {
        evtId: row.evtId,
        appId: route.params.id
      };
      showEdit.value = true;
    };
    const tableColumns = ref([
      {
        label: "事件名称",
        key: "evtName",
        minWidth: '250'
      },
      {
        label: "所属应用",
        key: "evtAppName",
        minWidth: '200'
      },
      {
        label: "主题",
        key: "topicName",
        minWidth: '200'
      },
      {
        label: "消费者数及最大限制",
        key: "subscriberCnt",
        align:"center",
        minWidth: '150',
         render: (h, {row, index}) => 
         <span>
             {row.subNum + '/' + (row.subscriberCnt<0?'无限制':row.subscriberCnt)}
          </span>
      },
      {
        label: "服务转事件",
        width: '100',
        align:"center",
        render: (h, {row, index}) => 
         <span>
             {row.svcToEvt == 1 ?'是':'否'}
          </span>
      },
      {
        label: "上线状态",
        width:'100',
        render: (h, {row, index}) => 
         <span class={row.sts == 'A'?'online':'outline'}>
          {row.sts == 'A'?'已上线':'未上线'}
         </span>
      },
      {
        label: "订阅状态",
        width: '100',
        render: (h, {row, index}) => 
         <div class="tab-status-tag">
              <b class={row.permsSts == 0 ?'success':'todo'} />
              <span class={row.permsSts == 0 ?'success':'todo'}>{row.permsSts == 0?'已订阅':'未订阅'}</span>     
          </div>
      },
      {
        label: '操作', fixed: 'right', width: '150px',
        render: (h, params) => 
        <span>
          {params.row.permsSts == 0?
           <el-popconfirm
              title="确定要解除订阅吗？"
              confirmButtonText="好的"
              cancelButtonText="不用了"
              onConfirm={() => handleDelete(params.row)}
              v-slots={{
                reference: () => (
                  <el-button type="text" size="small">
                    解除订阅
                  </el-button>
                )
              }}
            />: 
           (params.row.sts == 'A' && params.row.subscriberCnt - params.row.subNum>0? 
            <el-button type="text" size="small" 
              onClick={() => handleCreate(params.row, params.index)}
            >
            订阅
            </el-button>: 
            <span style="font-size: 12px;color:#c0c4cc">暂时无法订阅</span>
            )
          }

          { 
            params.row.permsSts == 0 &&
            <el-button type="text" size="small" 
              onClick={() => handleUpdate(params.row, params.index)}
            >
            订阅配置
            </el-button>
             
          }
          
        </span>
      }
    ]);
    onMounted(() => {
        getList()
    })

    return {
        page,
        total,
        getList,
        route,
        Search,
        list,
        listLoading,
        editType,
        query,
        queryChange,
        tableColumns,
        refresh,
        DynamicTable,
        // 订阅
        showEdit,
        router,
        currentItem,
        reset
    };
  },
});
</script>
<style lang="scss" scoped>
.el-select {
  margin-right: 10px;
}
:deep(.tab-status-tag){
  b {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: 0.1em;
    &.error {
      background: rgba(255, 58, 58, 1);
    }
    &.todo {
      background: rgba(255, 139, 58, 1);
    }
    &.success {
      background: rgba(42, 207, 138, 1);
    }
  }
  span {
    &.error {
      color: rgba(255, 58, 58, 1);
    }
    &.todo {
      color: rgba(255, 139, 58, 1);
    }
    &.success {
      color: rgba(42, 207, 138, 1);
    }
  }
}
:deep(.online){
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius:22px;
  border: 1px solid rgba(42, 207, 138, 1);
  color: rgba(42, 207, 138, 1);
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/online.png) 100% no-repeat;
  // background-size: 100% 100%;
}
:deep(.outline) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius:22px;
  border: 1px solid rgba(255, 139, 58, 1);
  color: rgba(255, 139, 58, 1);
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/outline.png) 100% no-repeat;
  // background-size: 100% 100%;
}
:deep(.test) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius:22px;
  border: 1px solid #909399;
  color: #909399;
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/outline.png) 100% no-repeat;
  // background-size: 100% 100%;
}
</style>